<template>
  <div class="backgroundimg">
<!--    <h1 class="h1class">文件上传</h1>-->
    <div class="example">
      <input  class="custom-width-btn1" type="file" @change="onFileChange">
      <div></div>
      <el-button  class="custom-width-btn2" @click="uploadFile11"  v-has-permi="['exam:download']">上传</el-button>
    </div>

  </div>
</template>

<script>
import {uploadFile} from "@/api/provinceSchoolProfession";

export default {
  data() {
    return {
      file: null
    };
  },
  methods: {
    onFileChange(e) {
      this.file = e.target.files[0];
    },
    uploadFile11() {
      const formData = new FormData();
      formData.append('file', this.file);
      console.log(this.file);
      uploadFile(formData).then(response => {
        console.log(response);
      }).catch(error => {
        console.error(error);
      });
    }
  }
};
</script>

<style>
body {
  font-family: Arial, sans-serif;
  background-color: #f1f1f1;
}

.h1class {
  position: absolute;
  top: 0;
  text-align: center;
  color: #333;
}
.backgroundimg{
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url('true.jpg');
  background-size: cover;
}
.example {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100vh;
}
.custom-width-btn1 {
  width: 367px; /* 根据需要设置宽度 */
}
.custom-width-btn2 {
  width: 367px; /* 根据需要设置宽度 */
}
</style>
